<template>


  <div class="profile-authentication-area">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-12">
          <div class="profile-authentication-image">
            <div class="d-table">
              <div class="d-table-cell">
                <div class="content-image">
                  <div class="logo">
                    <a href="index.html"><img src="@/assets/images/logo.png" alt="Zust"></a>
                  </div>
                  <div class="vector-image">
                    <img src="@/assets/images/vector.png" alt="image">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-12">
          <div class="register-form">
            <h2>注册</h2>
            <form>
              <div class="form-group">
                <label>登录账号名称</label>
                <input type="text" class="form-control" v-model="registerForm.username">
              </div>
              <div class="form-group">
                <label>用户昵称</label>
                <input type="text" class="form-control" v-model="registerForm.webUserInfo.nickname">
              </div>
              <div class="form-group">
                <label>手机号</label>
                <input type="text" class="form-control" v-model="registerForm.phone">
              </div>
              <div class="form-group">
                <label>电子邮箱</label>
                <input type="email" class="form-control" v-model="registerForm.email">
              </div>
              <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" v-model="registerForm.password">
              </div>
              <div class="form-group">
                <label>确认密码</label>
                <input type="password" class="form-control">
              </div>
              <div class="remember-me-wrap">
                <p>
                  <input type="checkbox" id="test1">
                  <label for="test1">I Accept The <a href="privacy.html">Privacy</a></label>
                </p>
              </div>
              <button type="submit" class="default-btn" @click="handleReg()">注册</button>
              <div class="or-text"><span>Or</span></div>
              <button type="submit" class="google-btn">Log In with Google</button>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from 'element-plus'
import router from '@/router/index.js'
import useUserStore from '@/stores/loginStore.js'
import {register} from '@/api/webUser.js'

const registerForm = ref({
  username: '',
  password: '',
  email: '',
  phone: '',
  webUserInfo: {
    nickname: ''
  }
})
//注册方法
const handleReg = async () => {
  const request = await register(registerForm.value)
  if (request.code == 200) {
      ElMessage.success("注册成功")
//TODO 跳转
  }
}
</script>

<style scoped>

</style>